<template>
  <div class="new-tab-page large parkinglot-wrapper">
    <div class="page-main-title">
      通道配置-修改潮汐通道
      <a href="javascript:;" class="add-icon" @click="linkToAddTideChannel">
        <i class="el-icon-circle-plus"></i>
        新增潮汐通道
      </a>
    </div>
    <div class="main-content" v-if="tideChannel.list.length">
      <el-form
        label-width="120px"
        size="small"
        class="zb-form zb-disabled-form"
        label-position="left"
        :model="tideChannel"
        ref="tideChannel"
      >
        <div class="channel-item" v-for="(item, index) in tideChannel.list">
          <div class="title">
            <div class="title-name">{{item.tideName}}</div>
            <div class="action">
              <div class="show-rule-detail-icon" @click="item.uiOpt.isShow = !item.uiOpt.isShow ">
                <i
                  class="el-icon-caret-top"
                  :class="{rotate180:
                      item.uiOpt.isShow}"
                ></i>
              </div>
              <div class="edit-icon" @click="editItem(item, index, tideChannel.list)">
                <i class="el-icon-edit"></i>
              </div>
              <div class="del-icon" @click="delTideChannel(item, index, tideChannel.list)">
                <i class="el-icon-close"></i>
              </div>
            </div>
          </div>
          <el-collapse-transition>
            <div class="channel-item-bd" v-show="item.uiOpt.isShow">
              <div class="channel-item-bd-inner">
                <el-form-item
                  label="潮汐通道名称"
                  :prop="'list.' + index + '.tideName'"
                  placeholder="请输入潮汐通道名称"
                  class="input-width-control"
                  :rules="{
      required: true, message: '潮汐通道名称不能为空', trigger: 'blur'
    }"
                >
                  <el-input v-model="item.tideName" :disabled="!item.uiOpt.isEdit"></el-input>
                </el-form-item>

                <el-form-item label="通道类型" :prop="'list.' + index + '.tideType'">
                  <el-select
                    placeholder="请选择"
                    v-model="item.tideType"
                    :disabled="item.uiOpt.isEdit"
                  >
                    <el-option value="1" label="同进出通道"></el-option>
                    <el-option value="0" label="进出切换通道"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="通道(入口)" :prop="'list.' + index + '.enterChannelId'">
                  <el-select placeholder="请选择" v-model="item.enterChannelId" :disabled="true">
                    <el-option
                      v-for="item in enterChannelList"
                      :key="item.id"
                      :label="item.entranceName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="通道(出口)"
                  class="input-width-control"
                  :prop="'list.' + index + '.leaveChannelId'"
                >
                  <el-select v-model="item.leaveChannelId" placeholder="请选择" :disabled="true">
                    <el-option
                      v-for="item in leaveChannelList"
                      :key="item.id"
                      :label="item.entranceName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="切换方式" class="input-width-control" v-if="item.tideType == 0">
                  <el-radio-group
                    v-model="item.uiOpt.curType"
                    @change="typeChange($event, item)"
                    :disabled="!item.uiOpt.isEdit"
                  >
                    <el-radio label="manualChangeEnable">手动切换</el-radio>
                    <el-radio label="autoChangeEnable">自动切换</el-radio>
                  </el-radio-group>
                </el-form-item>
                <div class="change-mode-box" v-if="item.tideType == 0">
                  <div
                    class="el-form--inline zb-inline-form rule-inline-form"
                    v-if="item.uiOpt.curType === 'manualChangeEnable'"
                  >
                    <el-form-item label="通道" class="input-width-control channel-change">
                      <el-radio-group
                        v-model="item.manualChangeType"
                        :disabled="!item.uiOpt.isEdit"
                      >
                        <el-radio :label="0">入口</el-radio>
                        <el-radio :label="1">出口</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </div>

                  <div
                    class="el-form--inline zb-inline-form rule-inline-form"
                    v-if="item.uiOpt.curType === 'autoChangeEnable'"
                  >
                    <el-form-item label="通道" class="input-width-control channel-change">
                      <el-radio-group v-model="item.autoChangeType" :disabled="!item.uiOpt.isEdit">
                        <el-radio :label="0">入口</el-radio>
                        <el-radio :label="1">出口</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </div>
                  <div class="change-mode-bd" v-if="item.uiOpt.curType === 'autoChangeEnable'">
                    <div
                      class="el-form--inline zb-inline-form rule-inline-form date-form-item w350"
                      v-for="(titem, index) in item.uiOpt.timeList"
                      style="width:456px"
                    >
                      <el-form-item :label="`生效时段${index + 1}`" label-width="86px">
                        <el-time-picker
                          value-format="HH:mm"
                          format="HH:mm"
                          :picker-options="{
      selectableRange: '00:00:00 - 23:59:59'
                      }"
                          is-range
                          v-model="titem.timeRang"
                          range-separator="至"
                          start-placeholder="开始时间"
                          end-placeholder="结束时间"
                          placeholder="选择时间范围"
                          @change="checkTime($event, titem, index, item.uiOpt.timeList, 0)"
                          :disabled="!item.uiOpt.isEdit"
                        ></el-time-picker>

                        <!-- <el-time-picker
                      value-format="HH:mm"
                      format="HH:mm"
                      :picker-options="{
      selectableRange: '00:00:00 - 23:59:59'
    }"
                      placeholder="开始时间"
                      v-model="item[0]"
                      @change="checkTime($event, item, index, initTideChannelData.uiOpt.timeList, 0)"
                    >
                    </el-time-picker>
                  </el-form-item>
                  <span
                    class="unit"
                    style="margin-right: 10px"
                  >至</span>
                  <el-form-item
                    label=""
                    label-width="0"
                  >
                    <el-time-picker
                      value-format="HH:mm"
                      format="HH:mm"
                      :picker-options="{
      selectableRange: '00:00:00 - 23:59:59'
    }"
                      placeholder="结束时间"
                      v-model="item[1]"
                      @change="checkTime($event, item, index, initTideChannelData.uiOpt.timeList, 1)"
                    >
                        </el-time-picker>-->
                      </el-form-item>

                      <div
                        class="add-icon"
                        v-if="index === 0 && item.uiOpt.isEdit"
                        @click="addTime(item.uiOpt.timeList)"
                      >
                        <i class="el-icon-circle-plus"></i>
                      </div>
                      <div
                        class="del-icon"
                        v-if="index > 0 && item.uiOpt.isEdit"
                        @click="delTime(item.uiOpt.timeList, index)"
                      >
                        <i class="el-icon-close"></i>
                      </div>
                    </div>

                    <div class="el-form--inline zb-inline-form rule-inline-form">
                      <el-form-item
                        label="生效周期"
                        class="input-width-control"
                        label-width="86px"
                        :prop="'list.' + index + '.autoEffectCycleType'"
                        :rules="{
      required: true, message: '请选择生效周期', trigger: 'change'
    }"
                      >
                        <el-select
                          v-model="item.autoEffectCycleType"
                          placeholder="请选择"
                          :disabled="!item.uiOpt.isEdit"
                        >
                          <el-option
                            v-for="item in autoEffectCycleType"
                            :key="item.value"
                            :label="item.type"
                            :value="item.value"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </div>

                    <div
                      class="el-form--inline zb-inline-form rule-inline-form week-item"
                      v-if="item.autoEffectCycleType === 1"
                    >
                      <el-form-item
                        label="按周"
                        class="input-width-control"
                        label-width="86px"
                        :prop="'list.' + index + '.uiOpt.weekSelected'"
                        :rules="{
      required: true, message: '请至少选择一项', trigger: 'change'
    }"
                      >
                        <el-checkbox-group
                          v-model="item.uiOpt.weekSelected"
                          :disabled="!item.uiOpt.isEdit"
                        >
                          <el-checkbox
                            v-for="item in weekOpt"
                            :label="item.value"
                            :key="item.value"
                          >{{item.type}}</el-checkbox>
                        </el-checkbox-group>
                      </el-form-item>
                    </div>

                    <el-form-item
                      label="自定义"
                      prop
                      placeholder="请选择"
                      label-width="86px"
                      class="more-dates"
                      v-if="item.autoEffectCycleType === 2"
                      :prop="'list.' + index + '.uiOpt.dateSelected'"
                      :rules="{
      required: true, message: '请至少选择一个日期', trigger: 'change'
    }"
                    >
                      <el-date-picker
                        value-format="yyyy-MM-dd"
                        type="dates"
                        v-model="item.uiOpt.dateSelected"
                        placeholder="选择一个或多个日期"
                        :disabled="!item.uiOpt.isEdit"
                      ></el-date-picker>
                    </el-form-item>

                    <el-form-item
                      label="已选择日期"
                      label-width="110px"
                      v-if="item.autoEffectCycleType === 2"
                    >
                      <div class="more-dates-box">{{item.uiOpt.dateSelected.join(', ')}}</div>
                    </el-form-item>
                  </div>
                </div>

                <el-form-item
                  size="medium"
                  class="action-box"
                  label-width="0px"
                  v-if="item.uiOpt.isEdit"
                >
                  <el-button plain type="primary" @click="cancleEdit(item, index)">取消</el-button>
                  <el-button type="primary" @click="testForm(item)">保存</el-button>
                </el-form-item>
              </div>
            </div>
          </el-collapse-transition>
        </div>
      </el-form>
    </div>

    <div class="bottom-action-box">
      <el-button plain size="medium" type="primary" @click="back">返回</el-button>
    </div>
  </div>
</template>

<script>
import pageScript from "./index.js";
export default pageScript;
</script>


<style lang="less" scoped>
@import "./index.less";
</style>

<style lang="less">
@import "../../../../../assets/less/base/zbForm.less";
</style>

